<template>
  <div style="width: 40%; height: 100%">
    <ul>
      <li
        v-for="(item, index) in list"
        :key="index"
        @click="handleClick(item.id)"
        :class="['tabli', { active: item.id === selData }]"
      >
        [ {{ item.name }} ]
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selData: null,
      list: [
        { name: "视频一", id: "0" },
        {
          name: "视频二",
          id: "1",
        },
        { name: "视频三", id: "2" },
        {
          name: "视频四",
          id: "3",
        },
        { name: "视频五", id: "4" },
        {
          name: "视频六",
          id: "5",
        },
        { name: "视频七", id: "6" },
        {
          name: "视频八",
          id: "7",
        },
        { name: "视频九", id: "8" },
        {
          name: "视频十",
          id: "9",
        },
        { name: "视频十一", id: "10" },
        {
          name: "视频十二",
          id: "11",
        },
        { name: "视频十三", id: "12" },
        {
          name: "视频十四",
          id: "13",
        },
        { name: "视频十五", id: "14" },
        {
          name: "视频十六",
          id: "15",
        },
      ],
    };
  },
  methods: {
    handleClick(index) {
      this.selData = index;
      this.$emit("giveFather", index);
    },
  },
};
</script>
<style scoped>
ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}
ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 5px;
}
li {
  cursor: pointer;
  padding: 3px 0;
  font-size: 12px;
  width: 25%;
}
li.active {
  color: #2f4989;
  font-weight: 600;
}
</style>